<template>
  <div>
    <h2>深入v-model</h2>
    <!-- 数据的双向绑定 -->
    <input type="text" v-model="msg">
    <span>{{msg}}</span>
    <br>
    <h2>数据双向绑定v-model实现原理</h2>
    <!-- :value,动态属性 -->
    <input type="text" :value="msg" @input="msg = $event.target.value">
    <span>{{msg}}</span>
    <hr>
    <!-- 
      :value 父组件给子组件传递的props数据
      @input:属于自定义事件
     -->
    <CustomInput :value="msg" @input="msg=$event"/>
    <!-- 
       组件标签的身上v-model
       通过props把父组件的数据传递给子组件=>:value=msg
       给当前组件，绑定一个自定义事件@input
     -->
    <CustomInput v-model="msg"/>
  </div>
</template>

<script type="text/ecmascript-6">
  import CustomInput from './CustomInput.vue'
  export default {
    name: 'ModelTest',
    data(){
      return {
         msg:"我爱你塞北的大雪啊"
      }
    },
    components: {
      CustomInput
    },
  }
</script>
